<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆</title>
    <link rel="stylesheet" th:href="@{/css/semantic.css}"/>
</head>
<style type="text/css">
    body {
        background-color: #DADADA;
    }
    body > .grid {
        height: 100%;
    }
    .image {
        margin-top: -100px;
    }
    .column {
        max-width: 450px;
    }
</style>
<body>
<div class="ui middle aligned center aligned grid">
    <div class="column">
        <h2 class="ui teal image header">
            <div class="content">登陆</div>
        </h2>
        <form id="loginForm" class="ui large form" th:action="@{/login}" method="post">
            <div class="ui stacked segment">
                <div class="field">
                    <div class="ui left icon input">
                        <i class="user icon"></i>
                        <input type="text" name="name" placeholder="E-mail address">
                    </div>
                </div>
                <div class="field">
                    <div class="ui left icon input">
                        <i class="lock icon"></i>
                        <input type="password" name="pwd" placeholder="Password">
                    </div>
                </div>
                <div class="field">
                    <input type="checkbox" name="remember"> 记住我
                </div>
                <div id="login" class="ui fluid large teal submit button">登录</div>
            </div>
        </form>
    </div>
</div>
<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/js/semantic.js}"></script>

<script>
    $(document).ready(function(){
        $("#login").click(function(){
            $("#loginForm").submit();
        });
    });
</script>
</body>
</html>